import React, {useEffect, useState} from 'react';
import {
  View,
  Text,
  TouchableOpacity,
  ActivityIndicator,
  FlatList,
  Image,
  ScrollView,
} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import AreaView from '../../components/Layout/AreaView';
import styles from './style';
import Banner from '../../components/Banner';
import SearchHeadIcon from '../../components/SearchHeadIcon';
import BaseUrl from '../../config/BaseUrl';
import {getTreelist, getPaperlist} from '../../service/common';

const navList = [
  {
    name: '模拟试卷',
    id: 1,
    route: 'SimulationPaper',
    url: require('../../assets/images/simulation/nav1.png'),
  },
  {
    name: '历年真题',
    id: 2,
    route: 'SimulationPaper',
    url: require('../../assets/images/simulation/nav2.png'),
  },
  {
    name: '练习记录',
    id: 3,
    route: 'StudyHistory',
    url: require('../../assets/images/simulation/nav3.png'),
  },
  {
    name: '竞赛游戏',
    id: 4,
    route: 'GuessGame',
    url: require('../../assets/images/simulation/nav4.png'),
  },
];
const LabelList = () => {
  const navigation = useNavigation();
  const [currentIndex, setCurrentIndex] = useState(0);
  const [tabs, setTabs] = useState([]);
  const [couses, setCouses] = useState([]);
  useEffect(() => {
    navigation.setOptions({
      title: '题库',
      // headerRight: () => <SearchHeadIcon />,
    });
    getTreelistQuest();
  }, [navigation]);
  const getTreelistQuest = () => {
    getTreelist({type: 1012}).then((res) => {
      console.log(res);
      setTabs(res.data);
      // 这里需要根据分类查询，后续修改
      getPaperlistQuest(res.data[0]?.nodeId);  
    });
  };
  const getPaperlistQuest = (epType) => {
    getPaperlist({epScene: '01',epClazz:'02', epType}).then((res) => {
      console.log(res);
      setCouses([...res.rows]);
    });
  };
  const onPressList = (item) => {
    navigation.push('LabelDetail', {
      epId: item.epId,
    });
  };
  return (
    <AreaView>
      <View style={styles.wrapper_container}>
        <Banner />
      </View>
      <View style={styles.gap} />
      <View style={styles.tab_content}>
        <ScrollView
          showsHorizontalScrollIndicator={false}
          horizontal={true}
          style={styles.tab_container}>
          {(tabs || []).map((tab, i) => (
            <TouchableOpacity
              style={styles.tab_list}
              activeOpacity={1}
              key={tab.nodeId}
              onPress={() => {
                setCurrentIndex(i);
                // getQuestionListQuest(tab.nodeId);
                getPaperlistQuest(tab.nodeId);
              }}>
              <Text
                style={[
                  styles.tab_text,
                  // eslint-disable-next-line react-native/no-inline-styles
                  {
                    color: currentIndex === i ? '#EB0029' : '#333333',
                    fontWeight: currentIndex === i ? '600' : '400',
                  },
                ]}>
                {tab.nodeName}
              </Text>
              {currentIndex === i && <View style={styles.line} />}
            </TouchableOpacity>
          ))}
        </ScrollView>
      </View>
      <ScrollView style={styles.list_box}>
        {(couses || []).map((item) => (
          <TouchableOpacity
            key={item.epId}
            onPress={() => {
              onPressList && onPressList(item);
            }}
            style={styles.list_container}>
            <Image
              style={styles.list_img}
              source={{uri: BaseUrl.imgurl + item?.epImage}}
            />
            <View style={styles.content_container}>
              <View>
                <View style={styles.name_container}>
                  <Text style={styles.name_text}>{item?.epTitle}</Text>
                </View>
                <Text style={styles.desc} numberOfLines={4}>
                  {item?.epDesc}
                </Text>
              </View>
              <Text style={styles.pk}>已有{item?.epQstNum}人参与</Text>
            </View>
          </TouchableOpacity>
        ))}
      </ScrollView>
    </AreaView>
  );
};

export default LabelList;
